import { Table, Layout, theme } from 'antd';
import Xlsx from './Xlsx';
import './index.less'
const { Header, Content, Sider } = Layout;

type CurrentData = {
  rawData: ExcelRow[];
  displayData: any[];
  columns: Array<{ title: string; dataIndex: string }>;
  merges: MergeInfo[];
}

const Add: React.FC = () => {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const [currentData, setCurrentData] = useState<CurrentData>({
     rawData: [], displayData: [], columns: [], merges: [] 
  });
  const onChangeData = (data: CurrentData) => {
    setCurrentData(data);
  };
  return (
    <Layout style={{ background: colorBgContainer }}>
      <Header style={{ display: 'flex', alignItems: 'center' }}>
        <div className="header-title" >自定义excel宏工作流</div>
      </Header>
      <Layout>
        <Layout style={{ padding: 12, height: 'calc(100vh - 64px)', overflowY: 'auto'}}>
          <Content
            style={{
              padding: 24,
              margin: 0,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Xlsx onChangeData={onChangeData} />
          </Content>
        </Layout>
        <Sider width={500} style={{            
              padding: 24,
              margin: 0,
              height: 'calc(100vh - 64px)',
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}>
          <div style={{  }}>展示表格数据，限制为十条</div>
            <Table
              columns={currentData.columns.map((col) => ({
                ...col,
                // biome-ignore lint/suspicious/noExplicitAny: <explanation>
                render: (value: any) =>
                  value?.props ? <td {...value.props}>{value.children}</td> : value,
              }))}
              dataSource={currentData.displayData.slice(0, 10)}
              rowKey={(record) => record.key.toString()}
              bordered
              scroll={{ x: true }}
              style={{ marginTop: 24 }}
            />
        </Sider>
      </Layout>
    </Layout>
  );
};

export default Add;